<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5">
  {
    style: {
      navigationStyle: 'custom',
      navigationBarTitleText: '绑定银行卡',
      "enablePullDownRefresh": false,
    },
  }
  </route>
<template>
  <view class="bg-[#f4f4f4] min-h-[100vh]">
    <k-navbar title="绑定银行卡" :fixed="true" :placeholder="true"></k-navbar>

    <view class="mt-5 mx-[20rpx]">
      <wd-form ref="formRef" :model="state.form">
        <wd-cell-group>
          <view class="bg-white px-[20rpx]">
            <wd-input prop="value1" clearable v-model="state.form.value1" placeholder="银行卡用户姓名(必填)"
              :rules="getRequiredRules('银行卡用户姓名')" />
            <wd-input prop="value2" clearable v-model="state.form.value2" placeholder="身份证号码(必填)"
              :rules="getRequiredRules('身份证号码')" />
          </view>

          <view class="bg-white px-[20rpx] mt-[20rpx]">
            <wd-input prop="value1" clearable v-model="state.form.value1" placeholder="银行卡号(必填)"
              :rules="getRequiredRules('银行卡号')" />
            <wd-input prop="value2" clearable v-model="state.form.value2" :use-suffix-slot="true"
              placeholder="银行预留手机号(必填)" :rules="getRequiredRules('银行预留手机号')">
              <template #suffix>
                <wd-button size="small" :round="false" :disabled="isSend" @click="send">
                  <text>{{ isSend ? `${time}s后重试` : '发送验证码' }}</text>
                </wd-button>
              </template>
            </wd-input>
            <wd-input prop="value2" clearable v-model="state.form.value2" placeholder="验证码(必填)"
              :rules="getRequiredRules('验证码')" />
          </view>


        </wd-cell-group>
      </wd-form>
      <view class="mx-[10rpx] mt-[60rpx]">
        <wd-button block :round="false" @click="handleSubmit">确认</wd-button>
      </view>
    </view>
  </view>
</template>

<script setup>
import useAuthCode from '@/hooks/useAuthCode';
const state = ref({
  form: {
    value1: '',
    value2: ''
  }
});

const { time, isSend, send } = useAuthCode();
const formRef = ref();


function getRequiredRules(label) {
  return [{ required: true, message: `请填写${label}` }]
}

function handleSubmit() {
  formRef.value
    .validate()
    .then(({ valid, errors }) => {
      if (valid) {

      }
    })
    .catch((error) => {
      console.log(error, 'error')
    })
}
</script>

<style lang="scss" scoped></style>
